<template>
  <div class="app-container" style=" padding-top: 0;margin: 0">
    <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" :inline="true" label-width="90px">
      <px-form-item label="设备名称">
        <px-input
          v-model="queryParams.value"
          placeholder="请输入设备名称、设备ID"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery('search')"
        />
      </px-form-item>
      <px-form-item label="设备总称">
        <px-select v-model="queryParams.categoryId" placeholder="请选择设备总称" clearable style="width: 240px" filterable @change="handlecategoryId">
          <px-option v-for="dict in categoryList" :key="dict.id" :label="dict.name" :value="dict.id" />
        </px-select>
      </px-form-item>
      <px-form-item label="设备类型">
        <px-select v-model="queryParams.typeId" placeholder="请选择设备类型" clearable filterable style="width: 240px">
          <px-option v-for="dict in equipmentTypeList" :key="dict.id" :label="dict.name" :value="dict.id" />
        </px-select>
      </px-form-item>
      <px-form-item label="保养日期" style="width: 350px">
        <px-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="任务生成日期" end-placeholder="结束日期" />
      </px-form-item>
      <px-button style="margin-top: -17px" type="primary" icon="" @click="handleQuery('search')">搜索</px-button>
      <px-button style="margin-top: -17px" icon="" @click="resetQuery">重置</px-button>
    </px-form>
    <px-row :gutter="10" class="mb8">
      <px-col :span="1.5">
        <px-button v-has="'CommonEquipListAdd'" type="primary" icon="" @click="handleAdd">新增临时排查任务</px-button>
      </px-col>
    </px-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
const value1 = ref("");
const data = reactive({
  queryParams: {
    requestId: "",
    pageNum: 1,
    pageSize: 10,
    orderByColumn: "",
    isAsc: "",
    reasonable: true,
    value: "",
    categoryId: "",
    typeId: "",
    orderBy: ""
  },
  categoryList: [],
  equipmentTypeList: []
});
const { queryParams, categoryList, equipmentTypeList } = toRefs(data);
function handleQuery(type) {
  if (type == "search") {
    queryParams.value.pageNum = 1;
  }
  // getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value = {
    requestId: "",
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize,
    orderByColumn: "",
    isAsc: "",
    reasonable: true,
    value: "",
    categoryId: "",
    typeId: "",
    orderBy: ""
  };
  handleQuery("");
}
const handleAdd = () => {};
const handlecategoryId = () => {};
</script>
